import React, { Component } from 'react'
import { Flex, WingBlank, WhiteSpace, Toast } from 'antd-mobile'
import { withFormik , Form , Field , ErrorMessage } from 'formik'
import * as Yup from 'yup'
import { Link } from 'react-router-dom'
import {API, setToken} from '../../utils'

import NavHeader from '../../components/NavHeader'

import styles from './index.module.css'

// 验证规则：
const REG_UNAME = /^[a-zA-Z_\d]{5,8}$/
const REG_PWD = /^[a-zA-Z_\d]{5,12}$/

class Login extends Component {

  // state = {
  //   username: '',
  //   password: ''
  // }

  // getUsername = e => {
  //   // console.log(e, e.target);
  //   this.setState({
  //     username: e.target.value
  //   })
  // }

  // getPassword = e => {
  //   this.setState({
  //     password: e.target.value
  //   })
  // }

  // handleSubmit = async e => {
  //   e.preventDefault()
  //   const { username, password } = this.state
  //   // console.log(username,password);
  //  const res = await API.post('/user/login', {
  //     username, 
  //     password
  //  })
  //   console.log(res);
  //   const { body, description, status } = res.data
  //   // 判断是否登录成功
  //   if (status === 200) {
  //     // 登录成功后的操作
  //     // 把token存储到本地
  //     localStorage.setItem('hkzf_token', JSON.stringify(body.token));
  //     // 路由返回到上一页
  //     this.props.history.go(-1)
  //   } else {
  //     // 登录失败进行提示
  //     Toast.info(description, 2 , null ,false)
  //   }
  // }

  render() {
    // 通过 props 拿到高阶组件 withFormik 传递过来的属性
    // const { values, handleChange , handleSubmit , errors , touched , handleBlur} = this.props

    // console.log(errors,touched);
    return (
      <div className={styles.root}>
        {/* 顶部导航 */}
        <NavHeader className={styles.navHeader}>账号登录</NavHeader>
        <WhiteSpace size="xl" />

        {/* 登录表单 */}
        <WingBlank>
          <Form>
            <div className={styles.formItem}>
              <Field className={styles.input}
                name="username"
                placeholder="请输入账号"></Field>
              {/* <input
                value={values.username}
                onChange={handleChange}
                onBlur={handleBlur}
                className={styles.input}
                name="username"
                placeholder="请输入账号"
              /> */}
            </div>
            {/* 长度为5到8位，只能出现数字、字母、下划线 */}
            {/* <div className={styles.error}>账号为必填项</div> */}
            <ErrorMessage className={styles.error} name="username" component="div"></ErrorMessage>
            {/* {
              errors.username && touched.username &&
              ( <div className={styles.error}>{errors.username}</div> )
            } */}
            <div className={styles.formItem}>
              <Field
                className={styles.input}
                name="password"
                type="password"
                placeholder="请输入密码"></Field>
              {/* <input
                value={values.password}
                onChange={handleChange}
                onBlur={handleBlur}
                className={styles.input}
                name="password"
                type="password"
                placeholder="请输入密码"
              /> */}
            </div>
            {/* 长度为5到12位，只能出现数字、字母、下划线 */}
            {/* <div className={styles.error}>账号为必填项</div> */}
            <ErrorMessage className={styles.error} name="password" component="div"></ErrorMessage>
            {/* {
              errors.password && touched.password &&
              (<div className={styles.error}>{errors.password}</div>)
            } */}
            <div className={styles.formSubmit}>
              <button className={styles.submit}  type="submit">
                登 录
              </button>
            </div>
          </Form>
          <Flex className={styles.backHome}>
            <Flex.Item>
              <Link to="/registe">还没有账号，去注册~</Link>
            </Flex.Item>
          </Flex>
        </WingBlank>
      </div>
    )
  }
}

// formik 重构登录表单
 Login = withFormik({
  mapPropsToValues: () => ({ username: '',password: ''}),

  // Custom sync validation
  // validate: values => {
  //   const errors = {};

  //   if (!values.name) {
  //     errors.name = 'Required';
  //   }

  //   return errors;
  // },
     // 添加表单校验规则 --- yup
  validationSchema: Yup.object().shape({
    username: Yup.string()
      .required('账号为必填项')
      .matches(REG_UNAME, '长度为5到8位，只能出现数字、字母、下划线'),
    password: Yup.string()
      .required('密码为必填项')
      .matches(REG_PWD, '长度为5到12位，只能出现数字、字母、下划线')
  }),

   handleSubmit: async (values, { props }) => {
    const { username, password } = values
    // console.log(username,password);
   const res = await API.post('/user/login', {
      username, 
      password
   })
    // console.log(res.data.body.token);
    const { body, description, status } = res.data
    // 判断是否登录成功
    if (status === 200) {
      // 登录成功后的操作
      // 把token存储到本地
      // localStorage.setItem('hkzf_token', JSON.stringify(body.token));
      setToken(body.token)
      // // 路由返回到上一页
      // props.history.go(-1)

      console.log(props);
      if (!props.location.state) {
        props.history.go(-1)
      } else {
        // push 和 replace 区别
        // push [home,login,map]
        // replace [home,map] map 替换了 login
        props.history.replace(props.location.state.from.pathname)
      }

    } else {
      // 登录失败进行提示
      Toast.info(description, 2 , null ,false)
    }
  },

  displayName: 'BasicLoginForm',
})(Login);

export default Login
